<template>
    <dl class="item-dl" @click="goDetail">
        <dt>
            <img :src="url" alt="">
        </dt>
        <dd>{{title}}</dd>
    </dl>
</template>
<script>
export default {
    props:['url','title','id'],
    methods:{
        goDetail(){
            this.$router.push({name:'detail',params:{id:this.id}})
        }
    }
}
</script> 

<style lang="scss">
    .item-dl{
        width:33.3%;
        dt{
            width:80px;
            height:100px;
            margin:0 auto;
            overflow: hidden;
            img{
                width:100%;
                height: 100%;
            }
        }

        dd{
            text-align: center;
        }
    }
</style>

